高値 - 安値チャートを作成する

高値 - 安値チャートは、設計時でもソースビューでも作成できます。このトピックは、適切な参照と C1CandlestickChart コントロールが新しいアプリケーションに追加されていることを前提とします。

設計時の場合

C1CandlestickChart コントロールを選択して、コントロールのプロパティウィンドウを開きます。
Type プロパティを Appearance プロパティから探します。
ドロップダウン矢印を使用して、"Hl" をリストから選択します。
クイックスタートの手順２と同様に、SeriesList データを追加します。高値 - 安値チャートの場合は、高値、安値、および X 値だけが必要です。
ChartStyle オプションを使用して、チャートをカスタマイズします。
アプリケーションを実行します。

ソースビューの場合

次のマークアップを使用して、ソースビューで高値 - 安値チャートを作成およびカスタマイズできます。チャート要素には色と幅が設定されています。

ソースビュー	コードのコピー
<cc1:C1CandlestickChart ID="C1CandlestickChart1" runat="server" Type="Hl"> <CandlestickChartSeriesStyles> <cc1:CandlestickChartStyle> <HighLow Width="3"> <Fill Color="#0033CC"> </Fill> </HighLow> </cc1:CandlestickChartStyle> </CandlestickChartSeriesStyles> <SeriesList> <cc1:CandlestickChartSeries LegendEntry="True" Label="High-Low Values"> <Data> <High DoubleValues="10, 12, 11, 14, 16, 20, 18, 17" /> <Low DoubleValues="7.5, 8.6, 4.4, 4.2, 8, 9, 11, 10" /> <X> <Values> <cc1:ChartXData DateTimeValue="2014-03-07" /> <cc1:ChartXData DateTimeValue="2014-03-08" /> <cc1:ChartXData DateTimeValue="2014-03-09" /> <cc1:ChartXData DateTimeValue="2014-03-10" /> <cc1:ChartXData DateTimeValue="2014-03-11" /> <cc1:ChartXData DateTimeValue="2014-03-12" /> <cc1:ChartXData DateTimeValue="2014-03-13" /> <cc1:ChartXData DateTimeValue="2014-03-14" /> </Values> </X> </Data> </cc1:CandlestickChartSeries> </SeriesList> </cc1:C1CandlestickChart>

ソースビュー

コードのコピー

<cc1:C1CandlestickChart ID="C1CandlestickChart1" runat="server" Type="Hl">
    <CandlestickChartSeriesStyles>
        <cc1:CandlestickChartStyle>
            <HighLow Width="3">
                <Fill Color="#0033CC">
                </Fill>
            </HighLow>                   
        </cc1:CandlestickChartStyle>
    </CandlestickChartSeriesStyles>
    <SeriesList>
        <cc1:CandlestickChartSeries LegendEntry="True" Label="High-Low Values">
            <Data>
                <High DoubleValues="10, 12, 11, 14, 16, 20, 18, 17" />
                <Low DoubleValues="7.5, 8.6, 4.4, 4.2, 8, 9, 11, 10" />
                <X>
                    <Values>
                        <cc1:ChartXData DateTimeValue="2014-03-07" />
                        <cc1:ChartXData DateTimeValue="2014-03-08" />
                        <cc1:ChartXData DateTimeValue="2014-03-09" />
                        <cc1:ChartXData DateTimeValue="2014-03-10" />
                        <cc1:ChartXData DateTimeValue="2014-03-11" />
                        <cc1:ChartXData DateTimeValue="2014-03-12" />
                        <cc1:ChartXData DateTimeValue="2014-03-13" />
                        <cc1:ChartXData DateTimeValue="2014-03-14" />
                    </Values>
                </X>
            </Data>
        </cc1:CandlestickChartSeries>
    </SeriesList>           
</cc1:C1CandlestickChart>